<template>
  <div class="consumer-page activity-list-page">
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: '' }">Reported Ad</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"
                 class="demo-ruleForm main-search-box">
          <!--Ad状态-->
          <el-form-item label="Ad Status" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px;" class="editStyle" v-model="searchForm.statusId" placeholder="">
              <el-option v-for="i in statusOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
          <!--Order by-->
          <el-form-item label="Order By" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px" v-model="searchForm.sortStyle" placeholder="">
              <el-option v-for="i in sortByOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
          <!--搜索-->
          <el-form-item style="margin-top: 37px;margin-left: 30px;">
            <el-button @click="getList" type="primary">Search</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list-items-box">
        <!--表格-->
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border
          style="width: 100%"
          ref="singleTable"
          highlight-current-row
          :row-class-name="tableRowClassName"
          @current-change="handleCurrentChange"
        >
          <!--Ad id-->
          <el-table-column prop="goodsId" label="Ad ID" align="center" min-width="100">
          </el-table-column>
          <!--Ad status-->
          <el-table-column prop="status" label="Ad Status" align="center" min-width="120">
            <template slot-scope="scope">
              <p>{{getStatus(scope.row.status)}}</p>
            </template>
          </el-table-column>
          <!--Ad Verification Status-->
          <el-table-column prop="verificationStatus" label="Ad Verification Status" align="center" min-width="200">
            <template slot-scope="scope">
              <p>{{getVerifyStatus(scope.row.verificationStatus)}}</p>
            </template>
          </el-table-column>
          <!--Poster ID-->
          <el-table-column prop="posterId" label="Poster ID" align="center" min-width="120">
          </el-table-column>
          <!--Poster Name-->
          <el-table-column prop="posterName" label="Poster Name" align="center" min-width="120">
          </el-table-column>
          <!--Report Problem-->
          <el-table-column prop="" label="Report Problem" align="center" min-width="150">
            <template slot-scope="scope">
              <!--根据行的索引获取数据-->
              <p v-for="(item,index) in reportReasonData[scope.$index]" :key="index">{{item}}</p>
            </template>
          </el-table-column>
          <!--Report Others-->
          <el-table-column prop="reason" label="Report Others" align="center" min-width="120">
          </el-table-column>
          <!--Reporter ID-->
          <el-table-column prop="reporterId" label="Reporter ID" align="center" min-width="120">
          </el-table-column>
          <!--Reporter Name-->
          <el-table-column prop="reporterName" label="Reporter Name" align="center" min-width="140">
          </el-table-column>
          <!--Created Date-->
          <el-table-column prop="createDate" label="Created Date" align="center" min-width="160">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.createDate)}}</p>
            </template>
          </el-table-column>
          <!--Verification Updated Date-->
          <el-table-column prop="updateDateTime" label="Verification Updated Date" align="center" min-width="200">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.updateDateTime)}}</p>
            </template>
          </el-table-column>
          <!--Updated By-->
          <el-table-column prop="updatedBy" label="Updated By" align="center" min-width="120">
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 15px;text-align: center;">
          <el-pagination @size-change="handleChangeSize" @current-change="handleChangePage"
                         :current-page="pageData.pageNum" :page-size="pageData.pageSize"
                         :page-sizes="[10, 20, 50, 100, 500]" :page-count="pageInfo.totalPages"
                         :total="pageInfo.totalCount" layout="total, prev, pager, next, jumper, sizes">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getReportedAd} from '../../api/guc_api.js';

  export default {
    name: 'reportedAd',
    data() {
      return {
        // reportReasonData:[],
        reportReasonData:[],
        //上传表单数据
        searchForm: {
          statusId: '',
          sortStyle: 'create_date_time desc',
        },
        //状态选项数据
        statusOption: [
          {
            label: '',
            value: '',
          },
          {
            label: 'Active',
            value: 1,
          },
          {
            label: 'Deleted',
            value: 4,
          },
          {
            label: 'Suspended',
            value: 5,
          },
          {
            label: 'Inactive',
            value: 6,
          },
          {
            label: 'Pending',
            value: 7,
          },
          {
            label: 'Reported',
            value: 8,
          },
        ],
        //分类选项数据
        sortByOption: [
          {
            label: 'Latest First',
            value: 'create_date_time desc',
          },
          {
            label: 'Poster ID',
            value: 'posterId desc',
          },
          {
            label: 'Reported ID',
            value: 'reporterId desc',
          },
        ],
        pageData: {
          //页数
          pageNum: 1,
          //没页数据条数
          pageSize: 10,
        },
        pageInfo: {
          //总数据条数
          totalCount: 0,
          //总页数
          totalPages: 0,
        },
        //表格加载动画
        tableLoading: false,
        //表格数据
        tableData: [],
        //当前行
        currentRow: null,
      };
    },
    methods: {
      // 用来控制表格行点击选中状态
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //用来控制单双行样式
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'odd-row';
        }
        else if (rowIndex % 2 === 0) {
          return 'even-row';
        }
        return '';
      },
      //错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      //成功消息提示
      messageToastSuccess(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'success'
        })
      },
      //每页显示条数改变后调用
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val);
        this.pageData.pageNum = 1;
        this.getList();
      },
      //页数改变后调用
      handleChangePage(val) {
        this.pageData.pageNum = val;
        this.getList();
      },
      //日期格式化
      dateFormat(value) {
        if(!value){
          return ''
        }
        else{
          let date = new Date(value);
          let Y = date.getFullYear();
          let m = date.getMonth() + 1;
          let d = date.getDate();
          let H = date.getHours();
          let i = date.getMinutes();
          let s = date.getSeconds();
          if (m < 10) {
            m = '0' + m;
          }
          if (d < 10) {
            d = '0' + d;
          }
          if (H < 10) {
            H = '0' + H;
          }
          if (i < 10) {
            i = '0' + i;
          }
          if (s < 10) {
            s = '0' + s;
          }
          let t = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s;
          return t;
        }
      },
      //仓库状态格式化
      getStatus(value) {
        if (value === 1) {
          return 'Active';
        }
        else if (value === 2) {
          return 'Draft';
        }
        else if (value === 3) {
          return 'Sold';
        }
        else if (value === 4) {
          return 'Deleted';
        }
        else if (value === 5) {
          return 'Suspended';
        }
        else if (value === 6) {
          return 'Inactive';
        }
        else if (value === 7) {
          return 'Pending';
        }
        else if (value === 8) {
          return 'Reported';
        }
      },
      //审核状态格式化
      getVerifyStatus(value) {
        if (value == 0) {
          return 'Null'
        }
        else if (value == 1) {
          return 'Approved'
        }
        else if (value == 2) {
          return 'Not Sure'
        }
        else if (value == 3) {
          return 'Rejected'
        }
        else{
          return ''
        }
      },
      //获取表格数据
      getList() {
        this.tableLoading = true;
        let formAjaxData = {
          status: this.searchForm.statusId,
          sort: this.searchForm.sortStyle || 'create_date_time desc'
        }
        getReportedAd(Object.assign(formAjaxData, this.pageData))
          .then((res) => {
              if (res.data.errorID===0) {
                this.tableLoading = false;
                this.tableData = res.data.object.list;
                // 遍历tableData中所有的字段，把举报原因抽出来,放到一个数组里面
                let tempTotalArr=[]
                res.data.object.list.forEach((item,index)=>{
                  let tempArr=[]
                  if(item.counterfeit_item==1){
                    tempArr.push('Counterfeit item')
                  }
                  if(item.duplicate_post==1){
                    tempArr.push('Duplicate Ad')
                  }
                  if(item.no_longer_available==1){
                    tempArr.push('Item no longer available')
                  }
                  if(item.price_is_different_from_listing==1){
                    tempArr.push('Price is different from listing')
                  }
                  if(item.prohibited_item==1){
                    tempArr.push('Prohibited item')
                  }
                  if(item.scam==1){
                    tempArr.push('Scam')
                  }
                  if(item.unresponsive_poster==1){
                    tempArr.push('Unresponsive poster')
                  }
                  if(item.wrong_picture==1){
                    tempArr.push('Wrong picture')
                  }
                  if(item.wrong_category==1){
                    tempArr.push('Wrong category')
                  }
                  if(item.wrong_descriprtion==1){
                    tempArr.push('Wrong description')
                  }
                  tempTotalArr.push(tempArr)
                })
                this.reportReasonData=tempTotalArr
                // 分页信息配置
                this.pageInfo.totalPages = res.data.object.pages;
                this.pageInfo.totalCount = res.data.object.total;
              }
              else{
                this.tableLoading = false;
                this.messageToastErr(res.data.message)
              }
          })
          .catch((error) => {
            console.log(error)
            this.tableLoading = false
            this.messageToastErr('error,please try again later')
          })
      }
    },
    mounted() {
      this.getList();
    },
  };
</script>

<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    border-bottom: 1px solid #eee;
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .container-padding {
    padding: 0 40px;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .activity-list-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
